<template>
  <div>
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-form-item label="任务名称" prop="name">
        <el-input v-model.trim="form.name" clearable></el-input>
      </el-form-item>

      <el-form-item label="网站编码" prop="siteCoding">
        <el-select v-model="form.siteCoding" placeholder="请选择网站编码">
          <el-option label="UTF-8" value="UTF-8"></el-option>
          <el-option label="GBK" value="GBK"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="目标栏目" prop="classifyId">
        <el-cascader
          v-model="form.classifyId"
          :options="options"
          :props="props"
          @change="handleChange"
          filterable
        ></el-cascader>
      </el-form-item>

      <el-form-item label="采集条数">
        <el-input-number
          v-model="form.ruleVO.total"
          :min="-1"
          :max="9999"
          :step="5"
          label="描述文字"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="备注" prop="extFiled1">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="form.extFiled1"
          clearable
        >
        </el-input>
      </el-form-item>
    </el-form>

    <el-button
      type="primary"
      v-preventReClick
      @click="submitForm('form')"
      v-if="flag"
      >保 存</el-button
    >
    <el-button type="primary" plain v-preventReClick @click="handleNext()"
      >下一步</el-button
    >
  </div>
</template>
<script>
import dataManage from '../Public/dataManage'
export default {
  mixins: [dataManage],
  data() {
    return {
      options: [],
      props: {
        children: 'childList',
        label: 'name',
        value: 'id',
        expandTrigger: 'hover',
        checkStrictly: false,
        emitPath: false,
        multiple: false,
        checkStrictly: true,
      },
      form: {
        name: '',
        enabled: '0',
        extFiled1: '',
        siteCoding: 'UTF-8',
        classifyId: '',
        ruleVO: {
          siteCoding: '',
          classifyId: '',
          total: 10,
        },
      },
      rules: {
        name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
        siteCoding: [
          {
            required: true,
            message: '请选择网站编码',
            trigger: ['blur', 'change'],
          },
        ],
        classifyId: [
          {
            required: true,
            message: '请选择栏目',
            trigger: ['blur', 'change'],
          },
        ],
      },
      columnObj: {},
    }
  },
  watch: {
    'form.classifyId': {
      handler(v) {
        this.form.ruleVO.classifyId = v
      },
    },
  },
  methods: {
    init(row) {
      if (row.hasOwnProperty('id')) {
        this.form = { ...this.form, ...row }
        this.form.siteCoding = row.ruleVO.siteCoding
        this.form.classifyId = row.ruleVO.classifyId
        this.$set(this.form, 'id', row.id)
      } else {
        this.form = this.$options.data().form
        this.$delete(this.form, 'id')
      }
      if (this.taskRow.hasOwnProperty('name')) {
        this.form = { ...this.form, ...this.taskRow }
      }
      this.queryColumn()
    },
    //查询栏目
    async queryColumn() {
      let data = {
        pid: 0,
        classType: 3, //1.试卷 2.考试 3.栏目
      }
      let res = await this.$store.dispatch('sysClassifyList', data)
      this.options = res.data
      this.options.forEach((v) => {
        if (v.childList.length == 0) {
          delete v.childList
          return
        }
        v.childList.forEach((m) => {
          if (m.childList.length == 0) {
            delete m.childList
            return
          }
          m.childList.forEach((n) => {
            if (n.childList.length == 0) {
              delete n.childList
              return
            }
          })
        })
      })
    },
    //提交
    submitForm() {
      this.validateForm(async () => {
        this.form.ruleVO.siteCoding = this.form.siteCoding
        await this.$store.dispatch('updateTestPaper', this.form)
        this.successMsg('保存成功')
      }, 'step01')
    },
    //下一步
    handleNext() {
      this.form.ruleVO.siteCoding = this.form.siteCoding
      this.validateForm(this.$parent.nextStep, 'step01')
    },
    handleChange(val) {
      // console.log(val)
    },
  },
}
</script>
<style scoped lang="scss">
</style>